<!--
  author: tangcheng_cd
  create by: 2018/5/25
  descr: 机构树形表格
-->
<!--树形菜单引入模板-->
<template>
  <!--
    1、可以添加 show-checkbox 显示checkbox，默认不显示checkbox
    2、参数 cols 和 rows 是必选项，没有数据就给个空数组
  -->
  <div>
    <v-tree-menu :columns="cols"
                 class="orgTreeMunu"
                 :rows="rows"
                 :node-key="nodeKey"
                 ref="treeGrid"
                 v-loading="loading">
    </v-tree-menu>
  </div>
</template>
<script type="text/ecmascript-6">
  //  需要导入的路径
  import VTreeMenu from '../../../components/VTreeMenu/VTreeMenu'
  import {transTreeDataToVue} from '../../../assets/js'
  import api from '../../../api/url' // 获取机构树
  import ajax from '../../../api/ajax/ajax'
//  import {formatDate} from 'element-ui/packages/date-picker/src/util'

  /*
    显示列：
      机构名称
      机构号
      开始时间
      结束时间
      属地
      层级
      是否有效
   */
  export default {
    name: 'org-tree-grid',
    components: {
      VTreeMenu
    },
    props: {
      columns: Array
    },
    data () {
      return {
        loading: false, // 是否处于加载中
        cols: [
          {
            label: '机构名称',
            name: 'name',
            index: 'name'
          }, {
            label: '机构号',
            name: 'id',
            index: 'id',
            width: '400px'
          }, /* {
            label: '开始时间',
            name: 'beginDt',
            index: 'beginDt',
            width: '200px',
            holder: 'holder-function',
            holderFunction (val, col) {
              return formatDate(val)
            }
          }, {
            label: '结束时间',
            name: 'endDt',
            index: 'endDt',
            width: '200px',
            holder: 'holder-function',
            holderFunction (val, col) {
              return formatDate(val)
            }

          }, /* {
            label: '属地',
            name: 'locName',
            index: 'locName',
            width: '200px'
          }, */{
            label: '层级',
            name: 'layer',
            index: 'layer',
            width: '200px'
          }, {
            label: '是否有效',
            name: 'isValid',
            index: 'isValid',
            holder: 'radio-group',
            width: '200px',
            items: [{
              label: '是',
              value: 'Y'
            }, {
              label: '否',
              value: 'N'
            }]
          }
        ],
        rows: [],
        nodeKey: 'id'
      }
    },
    methods: {
      // 获取所有机构树数据
      getAllOrgTreeData () {
        // 数据加载中
        this.loading = true
        ajax.post(api.GET_ALL_ORG_TREE).then(res => {
          this.rows = transTreeDataToVue(res.data)
          // 数据加载完毕
          this.loading = false
        }).catch(e => {
          console.error('获取机构树发生错误！')
        })
      },
      // 获取机构树当前选中节点
      getCurrentNode () {
        return this.$refs.treeGrid.getCurrentNode()
      },
      // 取消选择当前节点
      cancelCurrentSelect () {
        return this.$refs.treeGrid.setCurrentKey()
      }
    },
    created () {
      if (this.columns) {
        this.cols = this.columns
      }
      this.getAllOrgTreeData()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .orgTreeMunu
    .tree-view-box
      .el-tree-node__content
        & > span
          display none
</style>
